<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
	<title>理解宏任务与微任务</title>
	<style type="text/css">
	* {
		padding: 0;
		margin: 0;
	}
    </style>
</head>
<body>
	<div class="container">
		<h1>理解宏任务与微任务</h1>
	</div>
	<script src="https://cdn.staticfile.org/jquery/3.2.0/jquery.js"></script>
 	<script type="text/javascript">

 		
		setTimeout(() => {
			console.log('setTimeout 宏任务，放到主线程中执行， 可以使用主线程中的变量')
			console.log(`a = ${a}, b = ${b}, p1 = `, p1)
		})

		const  a = 1
		let  b = 'hello'

		
		var p1 = new Promise(resolve => {
			console.log('------------Promise 之中 inner1 -----------\n')
			
			resolve('resolve之后将promise的处理(then回调)放到微任务队列中');
			console.log('------------Promise 之中 inner2 -----------\n')

		}).then(value=> {
			console.log('value1 = ' + value, `a = ${a}, b = ${b}, c = ${c}`)
			return '1111'
		})
		.then(value=> {
			setTimeout(() => {
				console.log('value2 = ' + value)
			})
			return '22222'
		})
		.then(value=> {
			console.log('value3 = ' + value)
		})


		let c = false
		
	</script>
</body>
</html>